<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/font-awesome.min.css">
  <link rel="stylesheet" href="qv.css">
</head>
<body style="background: transparent">
<div class="d-flex flex-row" style="height: 100vh">
  <div class="left-plan d-flex flex-column p-1 pb-0">
    <div class="ncard m-1">
      <div>站点选择</div>
      <select id="src"
        style="width: 240px;text-align: left;font-weight: bold;"
        class="p-1">
        <option value="GRAS3">GRAS3</option>
        <option value="GRAS4">GRAS4</option>
        <option value="GRAS5">GRAS5</option>
        <option value="DASSyn">DASSyn</option>
        <optgroup label="测控站">
          <option value="BACC1">佳木斯深空站</option>
          <option value="BACC2">喀什深空站</option>
          <option value="BACC3">阿根廷深空站</option>
          <option value="BACC4">青岛18米天线</option>
          <option value="BACC5">喀什18米天线</option>
          <option value="BACC6">纳米比亚18米天线</option>
          <option value="BACC7">喀什合成站</option>
          <option value="BACC8">喀什35米天线</option>
        </optgroup>
      </select>
    </div>
    <div class="ncard m-1">
      <div>工参遥测</div>
      <select size="4" class="x-sel" id="type-menu" style="height: 80px;">
        <option value="gunc/rt">工程参数</option>
        <option value="yaoc/rt">工程遥测</option>
      </select>
    </div>
    <div class="ncard m-1 flex-grow-1 d-flex flex-column mb-0">
      <div>科学数据</div>
      <select id="type-menu-sub" class="x-sel flex-grow-1" size="2">
        <option value="AMAC">中视场彩色相机</option><option value="AWACA">宽视场导航敏感器A</option><option value="AWACB">宽视场导航敏感器B</option>
        <option value="ANAC">窄视场导航敏感器</option><option value="AMSC">多光谱相机</option><option value="ARDIS">旋转衍射高光谱相机</option>
        <option value="ATES">热辐射光谱仪</option><option value="AVIRIS">可见红外成像光谱仪</option><option value="DMA">喷发物分析仪-尘埃分析仪</option>
        <option value="VITA">喷发物分析仪-挥发分分析仪</option><option value="CANPA">带电粒子与中性粒子分析仪</option><option value="ALADAR">激光一体化导航敏感器</option>
        <option value="ACSR">探测雷达</option><option value="AMAG">磁强计</option></select>
    </div>
  </div>
  <div class="d-flex flex-column flex-grow-1">
    <iframe name="viewer" class="d-block flex-grow-1 me-2 mt-2 bg-light"></iframe>
  </div>
</div>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script>
  let $INS = $('#type-menu-sub').click(to_ins)
  let $TELE = $('#type-menu').click(to_tele)
  let current = ''
  let $SRC =$('#src')
  function to_tele(ev) {
    current = $TELE.val()
    $INS.val('-')
    document.querySelector('iframe').src = `${current}.html`
    window.parent.location.hash = `TELE/${current}`
    window.parent.document.title = `OMSP - 数据快视 / ${current}`
  }

  function to_ins(ev) {
    current = $INS.val()
    src=$SRC.val()
    $TELE.val('-')
    document.querySelector('iframe').src = `${current}.html#${src}`
    window.parent.location.hash = `QV/${current}`
    window.parent.document.title = `OMSP - 数据快视 / ${current}`
  }

  function realtime() {
    document.querySelector('iframe').contentWindow.main.realtime()
  }

  function history() {
    document.querySelector('iframe').contentWindow.main.history()

  }
  function change_stat(e){
    let frame = document.querySelector('iframe').contentWindow
    frame.postMessage($SRC.val(),'*')
  }
  $SRC.change(change_stat)

</script>
</body>
</html>